<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>shouye</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="../dist/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="../less/shouye.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			.swiper-container {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				height: 5.96rem;
				
			}
			
			.swiper-slide img{
				width: 7.5rem;
				height: 5.96rem;
				display: block;
			}
			.swiper-pagination{
				top: 5.77rem;
				z-index: 100;
				
				
			}
		</style>
	</head>

	<body>
		<!-- Swiper -->
		<!-- 头部 -->
		<div class="headBox">
			<img src="../img/nav%20bar_icon_address.png" class="dingwei">
			<span class="city">深圳</span>
			<img src="../img/nav%20bar_icon_classification.png" class="fenlei">
			<img src="../img/nav%20bar_icon_video.png" class="vedio">
			<div class="inputBox">
				<img src="../img/search%20bar_icon_search.png" class="search_img">
				<input type="text" name="" id="" value="寻夏记" class="search_ipt" />
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../img/home_banner.png">
					</div>
					<div class="swiper-slide ">
						<img src="../img/home_banner.png">
					</div>
					<div class="swiper-slide ">
						<img src="../img/home_banner.png">
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<!-- 头部end -->
		<!-- 主要内容 -->
		<div class="contentBox">
			<!-- 分类 -->
			<div class="fenleiBox">
				<ul class="fenleiUl">

				</ul>
			</div>
			<!-- 分类end -->
			<!-- 热门 -->
			<div class="hotBox">
				<div class="head">
					<div class="leftBox">
						<span class="hotText">热门活动推荐</span>
						<span class="one"></span>
						<span class="two"></span>
						<span class="three"></span>
						<p>丰厚奖品与证书等你来拿</p>
					</div>
					<div class="newBox">
						<img src=".././img/popular%20activity%20recommendation_icon_change.png">
						<span>换一批</span>
					</div>
				</div>
				<div class="hotcontent">
					<ul class="hotUl">

					</ul>
				</div>
			</div>
			<!-- 热门end -->
			<!-- 灵感 -->
			<div class="lingganBox">
				<div class="head">
					<div class="leftBox">
						<span class="line"></span>
						<span class="title">热门图集推荐</span>
					</div>
					<div class="rightBox">
						<span class="more">查看更多</span>
						<img src="../img/home_icon_more(1).png">
					</div>
				</div>
				<div class="lgContent">
					<ul class="lgUl">

					</ul>
				</div>
				<div class="banner">
					<img src="../img/home_photo_operational%20banner.png">
				</div>
			</div>
			<!-- 灵感end -->
			<!-- 热门图集 -->
			<div class="pictureBox">
				<div class="head">
					<div class="leftBox">
						<span class="line"></span>
						<span class="title">热门图集推荐</span>
					</div>
					<div class="rightBox">
						<span class="more">查看更多</span>
						<img src="../img/home_icon_more(1).png">
					</div>
				</div>
				<div class="pictureContent">
					<ul class="pictureUl">

					</ul>
				</div>
			</div>
		</div>

	</body>

	<script src="../dist/js/swiper.min.js"></script>
	<script src="../js/rem.js"></script>
	<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination',
			slidesPerView: 1,
			paginationClickable: true,
			spaceBetween: 30,
			mousewheelControl: true,
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
		});
	</script>
	<script type="text/javascript">
	</script>
	<script type="text/javascript">
		//分类的图片
		var fenLei_img = [{
				text: '艺术创意',
				path: '../img/home_icon_artistic%20creativity.png'
			},
			{
				text: '生活随影',
				path: '../img/home_icon_exhibition%20collection.png'
			},
			{
				text: '展览集锦',
				path: '../img/home_icon_life%20shadow.png'
			},
			{
				text: '大作灵感',
				path: '../img/home_icon_work%20inspiration.png'
			},
		]

		for (var i = 0; i < fenLei_img.length; i++) {

			$('.fenleiUl').append('<li class="fenleiLi"><img src="' + fenLei_img[i].path + '" /><p>' + fenLei_img[i].text +
				'</p></li>')
		}

		//热门图片
		var hot_img = [{
				text: '#理想生活制造机',
				num: 189,
				path: '../img/popular%20recommendation_photo.png'
			},
			{
				text: '#唤醒童心影集',
				num: 2683,
				path: '../img/popular%20recommendation_photo.png'
			},
			{
				text: '#谷雨摄影季',
				num: 156,
				path: '../img/popular%20recommendation_photo.png'
			},
		]
		for (var i = 0; i < hot_img.length; i++) {

			$('.hotUl').append('<li class="hotLi"><img src="' + hot_img[i].path + '" ><p class="text">' + hot_img[i].text +
				'</p><p class="num">' + hot_img[i].num + '人已报名</p></li>')
		}

		//灵感
		var lg_img = [{
				title: '#人像摄影的灵感',
				text: '在她摄影中的人物总是安静地表现画面，体现出神秘的感...',
				path: '../img/photography%20inspiration%20and%20story_img.png'
			},
			{
				title: '#人像摄影的灵感',
				text: '在她摄影中的人物总是安静地表现画面，体现出神秘的感...',
				path: '../img/photography%20inspiration%20and%20story_img.png'
			},
			{
				title: '#人像摄影的灵感',
				text: '在她摄影中的人物总是安静地表现画面，体现出神秘的感...',
				path: '../img/photography%20inspiration%20and%20story_img.png'
			},
		]
		for (var i = 0; i < lg_img.length; i++) {

			$('.lgUl').append('<li class="lgLi"><img src="' + lg_img[i].path + '" ><p class="title">' + lg_img[i].title +
				'</p><p class="text">' + lg_img[i].text + '</p></li>')
		}

		// 热门图片
		var picture_img = [{
				title: '探索蓝色系摄影的奥妙',
				first: '艺术创意',
				second: '配色',
				path: '../img/popular%20picture%20recommendation_img.png',
				num: 20
			},
			{
				title: '探索蓝色系摄影的奥妙',
				first: '艺术创意',
				second: '配色',
				path: '../img/popular%20picture%20recommendation_img.png',
				num: 20
			},
			{
				title: '探索蓝色系摄影的奥妙',
				first: '艺术创意',
				second: '配色',
				third: '构图',
				path: '../img/popular%20picture%20recommendation_img.png',
				num: 20
			},
			{
				title: '探索蓝色系摄影的奥妙',
				first: '艺术创意',
				second: '配色',
				path: '../img/popular%20picture%20recommendation_img.png',
				num: 20
			},
		]
		// let picture_img = [{
		// 		title: '探索蓝色系摄影的奥妙',
		// 		first: ['艺术创意','艺术创意'],
		// 		second: ['配色'],
		// 		path: 'img/popular%20picture%20recommendation_img.png',
		// 		num: 20
		// 	},
		// 	{
		// 		title: '探索蓝色系摄影的奥妙',
		// 		first: ['艺术创意'],
		// 		second: ['配色'],
		// 		path: 'img/popular%20picture%20recommendation_img.png',
		// 		num: 20
		// 	},
		// 	{
		// 		title: '探索蓝色系摄影的奥妙',
		// 		first: ['艺术创意'],
		// 		second: ['配色'],
		// 		third: '构图',
		// 		path: 'img/popular%20picture%20recommendation_img.png',
		// 		num: 20
		// 	},
		// 	{
		// 		title: '探索蓝色系摄影的奥妙',
		// 		first: ['艺术创意'],
		// 		second: ['配色'],
		// 		path: 'img/popular%20picture%20recommendation_img.png',
		// 		num: 20
		// 	},
		// ]
		for (var i = 0; i < picture_img.length; i++) {
			if (picture_img[i].third) {
				$('.pictureUl').append('<li class="pictureLi"><img src="' + picture_img[i].path + '" ><p class="title">' +
					picture_img[i].title + '</p><span class="first">' + picture_img[i].first + '</span><span class="second">' +
					picture_img[i].second + '</span><span class="second">' +
					picture_img[i].third + '</span><span class="img_In"></span><span class="img_num">' + picture_img[i].num +
					'</span></li>')
			} else {
				$('.pictureUl').append('<li class="pictureLi"><img src="' + picture_img[i].path + '" ><p class="title">' +
					picture_img[i].title + '</p><span class="first">' + picture_img[i].first + '</span><span class="second">' +
					picture_img[i].second + '</span><span class="img_In"></span><span class="img_num">' + picture_img[i].num +
					'</span></li>')
			}
		
		}
		// for (var i = 0; i < picture_img.length; i++) {
		// 	if (picture_img[i].third) {
		// 		$('.pictureUl').append('<li class="pictureLi"><img src="' + picture_img[i].path + '" ><p class="title">' +
		// 			picture_img[i].title + '</span><span class="img_In"></span><span class="img_num">' + picture_img[i].num +
		// 			'</span></li>')
		// 	} else {
		// 		$('.pictureUl').append('<li class="pictureLi"><img src="' + picture_img[i].path + '" ><p class="title">' +
		// 			picture_img[i].title + '</span><span class="img_In"></span><span class="img_num">' + picture_img[i].num +
		// 			'</span></li>')
		// 	}
		// 	for(var j=0;j<picture_img.length;j++){
				
		// 	}
		// }
		$('.fenlei').click(function(){
			window.location.href="../fenlei.html"
		})
	</script>
</html>
